import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { FooterLeft, FooterRight, FooterWrapper } from './style'
import { footerLinks, footerImages } from '@/assets/data/local-data.ts'

interface IProps {
  children?: ReactNode
}

const footer: React.FC<IProps> = () => {
  return (
    <FooterWrapper>
      <div className="wrap-v2 content">
        <FooterLeft className="left">
          <div className="Link">
            {footerLinks.map((item) => (
              <a href={item.link} key={item.title}>
                {item.title}&nbsp; &nbsp; &nbsp;
              </a>
            ))}
          </div>
          <div className="copyright">
            <span>网易公司版权所有©1997-2020</span>
            <span>
              杭州乐读科技有限公司运营：
              <a
                href="https://p1.music.126.net/Mos9LTpl6kYt6YTutA6gjg==/109951164248627501.png"
                rel="noopener noreferrer"
                target="_blank"
              >
                浙网文[2018]3506-263号
              </a>
            </span>
          </div>
          <div className="report">
            <span>廉正举报</span>
            <span>
               不良信息举报邮箱:
              <a
                href="mailto:ncm5990@163.com"
                target="_blank"
                rel="noopener noreferrer"
              >
                51jubao@service.netease.com
              </a>
            </span>
          </div>
           <div className="info">
            <span>粤B2-20090191-18</span>
            <a
              href="http://www.beian.miit.gov.cn/publish/query/indexFirst.action"
              rel="noopener noreferrer"
              target="_blank"
            >
              工业和信息化部备案管理系统网站
            </a>
          </div>
        </FooterLeft>
        <FooterRight className="right">
          {footerImages.map((item)=>{
            return(
              <li className='item' key={item.link}>
                <a className='link' href={item.link} rel="noopener noreferrer" target="_blank"></a>
                <span className='text'>{item.title}</span>
              </li>
            )
          })}
        </FooterRight>
      </div>
    </FooterWrapper>
  )
}

export default memo(footer)

